<template>
  <div class="common-pwd-input">
    <el-input
      ref="input"
      :type="type"
      v-model="name"
      :placeholder="placeholder"
      :disabled="disabled"
      :maxlength="maxlength"
      :clearable="clearable"
      @blur="onBlur($event)"
      @focus="$emit('focus',$event)"
      @change="$emit('change',$event)"
      @input="$emit('input',$event)"
      @clear="$emit('clear',$event)"
      @keyup.enter.native="$emit('enter',$event)">
      <slot slot="prefix" name="prefix"></slot>
      <i slot="suffix" class="iconfont icon-kejian" v-if="isShowPwd" @click="showPwd"></i>
      <i slot="suffix" class="iconfont icon-bukejian" v-else @click="showPwd"></i>
    </el-input>
  </div>
</template>

<script>
  export default {
    name: 'index',
    props: {
      value: {
        type: [Number, String]
      },
      placeholder: {
        type: String,
        default: '请输入密码'
      },
      maxlength: {
        type: Number,
        default: 64,
      },
      disabled: {
        type: Boolean,
        default: false
      },
      clearable: {
        type: Boolean,
        default: false
      },
      verify: {
        type: Boolean,
        default: false
      },// 是否需要特殊字符校验
    },
    data() {
      return {
        type: 'password',
        isShowPwd: false,
      }
    },
    computed: {
      name: {
        get: function() {
          return typeof this.value === 'string' ? this.handleSpecialChar(this.value) : this.value
        },
        set: function(v) {
          let value = this.handleSpecialChar(v)
          this.$emit('input', value)
        }
      }
    },
    methods: {
      handleSpecialChar(str) {
        if (this.verify) {
          const rule = new RegExp('[^A-Za-z0-9_@.\\-#!$&\\s]','gi')
          str = str.replace(rule, '')
        } else {
          const rule = new RegExp("[^A-Za-z0-9_@.,\\-:*#!$%^&;'()/=+\\[\\]\\s]",'gi')
          str = str.replace(rule, '')
        }
        str = this.handleTrim(str)
        return str
      },
      handleTrim(v) {
        if (v === ' ' || v === '' || v === null || v === undefined) {
          return ''
        } else {
          return v.trim()
        }
      },
      onBlur(e) {
        let value = this.handleTrim(this.name)
        // this.$emit('input', value)
        this.$emit('blur', e)
      },
      showPwd() {
        this.isShowPwd = !this.isShowPwd
        this.type = this.isShowPwd ? 'text' : 'password'
      }
    },
  }
</script>

<style scoped>

</style>
